<template>
  <div id="teacherDetMask">
    <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
      width="750"
    >
      <template #header>
        <div class="my-header">
          <div class="header-title mb20">
            <div style="margin-top: 10px">咨询师介绍</div>
            <button
              style=""
              @click="handleClose"
              class="close-icon curpoin"
              @mouseover="isRotated = true"
              @mouseleave="isRotated = false"
            >
              <!-- src="../../assets/images/close.png" -->
              <img
                style="width: 30px"
                :class="{
                  'rotate-right': isRotated,
                  'rotate-left': !isRotated,
                }"
                src="../../../../assets/images/close.png"
                alt=""
              />
            </button>
          </div>
        </div>
        <div class="teacher-contaier">
          <div class="df" style="align-items: normal">
            <div style="margin-right: 10px">
              <img class="teacher-img" :src="teacherTeamData.picUrl" alt="" />
            </div>
            <div style="display: flex; flex: 1; justify-content: space-between">
              <div>
                <div
                  class="df"
                  style="align-items: normal; margin-bottom: 20px"
                >
                  <div class="f20">{{ teacherTeamData.name }}</div>
                  <div style="margin: 3px 10px 0 10px">
                    从业{{ teacherTeamData.expierences }}年
                  </div>
                  <el-rate disabled v-model="teacherTeamData.stars" />
                </div>
                <div class="f12">
                  <el-tag
                    style="margin-right: 10px"
                    size="small"
                    v-for="tag in JSON.parse(teacherTeamData.specialty)"
                    :key="tag"
                    >{{ tag }}</el-tag
                  >
                </div>
              </div>
              <div class="my-button curr" @click="handleSub(teacherTeamData)">
                {{ teacherTeamData.isReserve ? '已预约' : '预约' }}
              </div>
            </div>
          </div>

          <div
            class="f14"
            style="margin: 15px 0 25px 0"
            v-html="teacherTeamData.intro"
          ></div>
          <div class="f14" v-html="teacherTeamData.introduction"></div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const emits = defineEmits(['handleExperts']);
const isRotated = ref(false);
const dialogVisible = ref(false);
const handleClose = () => {
  dialogVisible.value = false;
};
const teacherTeamData = ref({});
const handleChangeMask = (isShow, teacherData) => {
  dialogVisible.value = isShow;
  teacherTeamData.value = teacherData;
};

const handleSub = (teacherTeamData) => {
  console.log(teacherTeamData, '预约');
  if (teacherTeamData.isReserve) {
    ElMessage('你已预约');
    return;
  } else {
    emits('handleExperts', teacherTeamData);
    dialogVisible.value = false;
  }
};
defineExpose({
  handleChangeMask,
});
</script>

<style lang="scss" scoped>
#teacherDetMask {
  position: relative; /* 设置父元素为相对定位 */
  .teacher-contaier {
    max-height: 550px;
    overflow: auto;
  }
  .teacher-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  .close-icon {
    position: absolute;
    top: 20px;
    right: 10px;
    background: 0 0;
    border: none;
    outline: 0;
    font-size: 16px;
  }
}
.rotate-right {
  transition: transform 0.6s ease;
  transform: rotate(180deg);
}

.rotate-left {
  transition: transform 0.6s ease;
  transform: rotate(0deg);
}
.el-rate {
  height: 26px;
}
.my-button {
  width: 76px;
  height: 32px;
  text-align: center;
  margin-right: 30px;
  border-radius: 4px;
  color: #fff;
  background: var(--color-text);
  line-height: 20px;
  padding: 6px 0;
}
</style>
